<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="img-cliper">
			<img
				src="https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202408/6aa5ba70214fb643c81e2c3f37ae9092.png"
			/>
			<i></i>
		</div>
	</body>
	<style>
        /* 
        通过阴影的 Spread 无限扩展 实现类似导航的效果
        */
		.img-cliper {
            width: 400px;
			overflow: hidden;
			position: relative;
			img {
				width: 400px;
			}
			i {
				position: absolute;
				left: 50px;
				top: 30px;
				border-radius: 100%;
				width: 100px;
				height: 50px;
				box-shadow: 0 0 0 9999px rgba(0,0,0, 0.6);
			}
		}
	</style>
</html>
